<template>
  <el-container class="setting_shopping-mall_contract-set">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="fin-setting-content">
            <el-card shadow="never" class="cardInfo">
              <el-form ref="tradeMarkCertify" :model="dataForm" :rules="dataFormRules">
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" prop="registrant" label="商标注册人:" class="person-center-form-item">
                          <el-input v-model="dataForm.registrant" class="form-item-input" placeholder="请输入商标注册人" />
                          <span class="form-item-title">(名称须与商标注册证书上名称一致)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" prop="category" label="商标类别:" class="person-center-form-item">
                          <el-input v-model="dataForm.category" class="form-item-input" placeholder="请输入商标类别" />
                          <span class="form-item-title">(对应商标注册证上的国际分类号，如：第35类)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" prop="registrationNo" label="注册证号码:" class="person-center-form-item">
                          <el-input v-model="dataForm.registrationNo" class="form-item-input" placeholder="请输入商标注册证号码" />
                          <span class="form-item-title">(商标注册证号)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" label="商标有效期:" class="person-center-form-item">
                          <el-date-picker
                            v-model="validityPickerOptions"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" label="授权有效期:" class="person-center-form-item">
                          <el-date-picker
                            v-model="authPickerOptions"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                            value-format="yyyy-MM-dd"
                          />
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item" style="height:194px;align-items:flex-start">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" label="商标注册文件:" class="person-center-form-item">
                          <div class="wh5-3" style="display: flex;">
                            <upload class="load-cont" ref="upload" :limit="1" :disabled="disabled" :file-list="fileList" :max-size="1" :file-filter="filterImgType" :name-show="false" @setUrl="getUrl" @setKey="getUrls" />
                          </div>
                          <span class="form-item-title">(清晰可见，有效期内，照片大小低于1M，格式为：png、jpg、jpeg)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item" style="height:194px;align-items:flex-start">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item label-width="120px" label="商标授权文件:" class="person-center-form-item">
                          <div class="wh5-3" style="display: flex;">
                            <upload class="load-cont" ref="upload2" :limit="1" :disabled="disabled" :file-list="fileList2" :max-size="1" :file-filter="filterImgType" :name-show="false" @setUrl="getUrl2" @setKey="getUrls2" />
                          </div>
                          <span class="form-item-title">(清晰可见，有效期内，照片大小低于1M，格式为：png、jpg、jpeg)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form>
            </el-card>
          </div>
        </div>
      </div>
      <div class="btn-footer">
        <el-button class="image-link-button-button" size="mini" @click="gotoCompanyCertification('','')">返回</el-button>
        <el-button class="image-link-button-button" size="mini" @click="submitAudit('','')">提交审核</el-button>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import upload from '@/components/upload/newUpload'
import { trademarkAuthenticationSave, trademarkAuthenticationSee, authenticationModify } from '@/api/authentication'
export default {
  components: {
    upload
  },
  props: {
    visable: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      active: 1,
      disabled: false,
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      dataFormRules: {
        registrant: [
          { required: true, message: '请填写商标注册人', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请填写类别', trigger: 'blur' }
        ],
        registrationNo: [{ required: true, message: '请填写注册证号码', trigger: 'blur' }]
      },
      // 上传图片
      fileList: [],
      fileList2: [],
      host: '',
      validityPickerOptions: [],
      authPickerOptions: [],
      dataForm: {
        // 注册人
        registrant: '',
        // 类别
        category: '',
        // 注册证号码
        registrationNo: '',
        validityStart: '',
        validityEnd: '',
        authStart: '',
        authEnd: '',
        registrationDoc: '',
        authDoc: ''
      }
    }
  },
  computed: {
    activeRadio: {
      get() {
        return this.value
      },
      set(val) {
      }
    }
  },
  created() {
    this.threeType = this.$route.query.type

    if (this.threeType === 2) {
      this.getInfo()
    }
  },
  mounted() {
  },
  methods: {
    getInfo() {
      trademarkAuthenticationSee().then(res => {
        if (res.name) {
          this.dataForm = res
        }
      })
    },
    submitAudit() {
      this.$refs.tradeMarkCertify.validate(valid => {
        if (valid) {
          if (!this.$refs.upload.key || !this.dataForm.pic) {
            this.$message.error('商标文件不能为空')
            return
          }
          if (!this.$refs.upload2.key || !this.dataForm.pics) {
            this.$message.error('授权文件不能为空')
            return
          }
          if (this.validityPickerOptions.length === 0) {
            this.$message.error('商标有效期不能为空')
            return
          } else {
            this.dataForm.validityStart = this.validityPickerOptions[0]
            this.dataForm.validityEnd = this.validityPickerOptions[1]
          }
          if (this.authPickerOptions.length === 0) {
            this.$message.error('授权有效期:不能为空')
            return
          } else {
            this.dataForm.authStart = this.authPickerOptions[0]
            this.dataForm.authEnd = this.authPickerOptions[1]
          }
          if (this.dataForm.pic) {
            this.dataForm.registrationDoc = this.dataForm.pic
          }
          console.log('this.dataForm.pics_re', this.dataForm.pic)
          if (this.dataForm.pics) {
            this.dataForm.authDoc = this.dataForm.pics
          }
          trademarkAuthenticationSave(this.dataForm).then(res => {
            if (res) {
              this.$message.success('保存成功')
              const obj = {
                trademarkAuthAuditStatus: 4
              }
              authenticationModify(obj).then(reponse => {
                this.$router.push('/setting/companyCertication')
              })
            } else {

            }
          })
        }
      })
    },
    getUrls(arr) {
      const arr1 = []
      arr.forEach(item => {
        arr1.push({
          name: item.zxfUrl,
          path: item.urlName,
          contentType: item.zxfUrl.split('.')[1]
        })
      })
      console.log(arr1, arr, 111)
      // console.log('this.fileList2', this.fileList2)
      if (arr.length === 0) {
        this.dataForm.pic = ''
        return
      }
      // this.dataForm.pic = arr1[0].path
      // console.log('this.dataForm.pic', this.dataForm.pic)
    },
    getUrls2(arr) {
      const arr1 = []
      arr.forEach(item => {
        arr1.push({
          name: item.zxfUrl,
          path: item.urlName,
          contentType: item.zxfUrl.split('.')[1]
        })
      })
      console.log(arr1, arr, 111)
      console.log('this.fileList2', this.fileList2)
      if (arr.length === 0) {
        this.dataForm.pics = ''
        return
      }
      // this.dataForm.pic = arr1[0].path
      console.log('this.dataForm.pics', this.dataForm.pics)
    },
    // 获取图片地址
    getUrl(path, name, host) {
      this.dataForm.pic = `${host}/${path}`
      console.log('this.dataForm.pic', this.dataForm.pic)
    },
    getUrl2(path, name, host) {
      this.dataForm.pics = `${host}/${path}`
      console.log('this.dataForm.picsss___sss', this.dataForm.pic)
    },
    gotoCompanyCertification(id, type) {
      this.$router.push(`/setting/companyCertication?id=${id}&type=${type}`)
    }
  }
}
</script>

<style lang="scss">
  .setting_shopping-mall_contract-set {
    background: #d8d8d8;
    padding: 4px;
    height: 90%;
    border-radius: 3px;
    overflow: hidden;
    .al_item{
      margin: 0;
    }
    .clearfix{
      margin-top: 20px;
      padding:5px;
      padding-top: 0;
      height: 15px;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
    }
    }
    .fin-setting-content {
      width: 100%;
      margin: 0px 0 4px 4px;
      overflow-x: hidden;
      overflow-y: hidden;
      border-radius:5px;
      .cardInfo {
          margin-top: 2px;
          padding: 2px;
          overflow:hidden;
       }
      .user-center-item {
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 10px;
        &.active {
          border: 1px solid #1890ff
        }
      }

    }
    .nav-item {
      font-size: 14px;
      background: #fff;
      border: 0px solid #e3e2e5;
      border-radius: 4px;
      margin-bottom: 2px;
      margin: 5px 80px 5px 80px;
      width: 100%;
      display: inline-block;

      &:nth-child(odd) {
        margin-right: 10px;
        font-size: 14px;
        color: #595961;
      }
      .intro-title {
        width: 100%;
        text-align: left;
        margin-bottom: 30px;
        .state {
          width: 700px;
          font-size: 14px;
          .el-step.is-center .el-step__description {
            padding: 0;
          }
          .el-step__head.is-success {
            border-color: #1890ff;
          }
          .is-success {
            color: #1890ff;
          }
        }
      }
      .item-header {
        border-radius: 4px 4px 0 0;
        // height: 40px;
        line-height: 39px;
        padding: 0 10px 0 5px;
      }

      .item-content {
        padding: 5px 0;
      }
    }
    .person-center-form-item {
      font-size: 14px;
      // height: 40px;
      margin: 0px 80px 0px 80px;
      .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
        font-size: 14px;
        color: #606266;
      }
      .el-input-number.is-without-controls.el-input__inner{
        width: 20px;
        height: 14px;
      }
      .el-input.is-without-controls.el-input__inner{
        height: 14px;
      }
      .form-item-input{
        min-height: 18px;
        width: 420px;
        font-size: 12px;
      }
      .form-item-title{
        padding-left: 1px;
        padding-right: 1px;
        color: #666;
      }
      .info-setting {
        margin-left: 15px;
        color: #0000FF;
        text-align: right;
        cursor: hand;
      }
      .flex-just{
        vertical-align: middle;
        width: 80px;
      }
    }
    .base-info {
      display: flex;
      .basics-info {
        margin: 0 auto;
      }
    }
    .el-form-item  {
      margin-bottom: 30px;
    }
    .el-col {
      margin-bottom: 0px;
    }
    .noMargin {
      margin-bottom: 0 !important;
    }
    .wh5-3 {
      li {
        width: 200px;
        height: 160px;
      }
      .el-upload--picture-card {
        width: 200px;
        height: 160px;
        line-height: 160px;
      }
    }
  .bg-white-panel {
    padding: 5px;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-left: 100px;
  }
.image-link-button {
  padding: 2px 0 0;
  margin-top: 14px;
  text-align: center;
  justify-content: space-between;
  .image-link-button-button{
     background-color: #00aaff;
     z-index: 1;
     color: #FFFFFF;
     height: 36px;
     width: 150px;
     border: 1px solid #FFFFFF;
     padding: 0;
     font-size: 12px;
     align-items: center;
     border-radius: 10px;
  }
}
  .load-cont{
    .el-upload--picture-card{
      width: 200px;
      height: 300px;
      line-height:200px
    }
    .el-upload-list__item{
      width: 200px;
      height: 300px;
    }
  }
</style>
